<template>
	<view class="box" :style="{ overflow: showWant? 'hidden' : 'auto' }">
		<uNavbar :title="titles" :bgColor="backgroundColor"></uNavbar>
		<!-- 商品 -->
		<view class="dengguang" v-if="checkMediaType(threeMoxing) == '3dmx'"></view>
		<view class="commodity flex_Z">
			<view class="commodity_top">
				<moxing v-if="checkMediaType(threeMoxing) == '3dmx'" :moxing="threeMoxing"></moxing>
				<image v-else class="tupians" :src="threeMoxing" mode="aspectFit"></image>
			</view>
			<view class="commodity_btm flex_ZC">
				<view class="commodity_btm_box">
					<view class="commodity_name flex_c">
						<text :class="checkLength(this.productName)>8 ? 'namess':'names'">{{this.productName}}</text>
					</view>
					<view class="series flex_ld">
						<view class="series_box flex_dq">
							<text>系列</text>
							<text>{{goodsSeries.series_name}}</text>
						</view>
						<view class="series_box flex_dq">
							<text>限量</text>
							<text>{{infoDetail.circulation == 0 ?'不限量':infoDetail.circulation + '份'}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 发行方 -->
		<view class="issuer flex_Z">
			<view class="issuer_box flex_dq">
				<image :src="shopBrand.logo" mode="aspectFill"></image>
				<view class="issuer_btm flex_Z">
					<text class="f28">发行方</text>
					<text class="f24 c9">{{shopBrand.brand_info}}</text>
				</view>
			</view>
			<view class="issuer_box mart30 flex_dq" @click="goTrend">
				<image class="qushi" src="../../static/image/i_trend.png" mode=""></image>
				<view class="issuer_btm flex_Z">
					<text class="f28">成交趋势</text>
				</view>
			</view>
		</view>
		<!-- 藏品描述 -->
		<view class="describe_box">
			<view class="describe_tit flex_dq">
				<view class="sss" v-for="(item,index) in list1" :key="index">
					<text :class="index == inx? 'active':''" @click="isTaggle(index)">{{item}}</text>
				</view>
			</view>
			<view class="describe_ntm flex_c" v-if="inx == 0">
				<rich-text class="quanyi" :nodes="nodeCentent"></rich-text>
			</view>
			<view class="equity_box qyi_box flex_Z" v-if="inx == 1">
				<view class="equity color1 flex_Z">
					<!-- <view class="equity_top qyi">
						<text>藏品权益</text>
					</view> -->
					<view class="equity_list bor_btm flex_dq">
						<rich-text class="quanyi_s" :nodes="nodeCentent2"></rich-text>
					</view>
				</view>
			</view>
		</view>
		<view class="notice_box flex_ZC">
			<view class="notice flex_c">
				<text class="tiao"></text>
				<text>购买需知</text>
				<text class="tiao"></text>
			</view>
			<view class="xuzhi">
				<rich-text class="f24 colors" :nodes="infoDetail.purchase_info"></rich-text>
			</view>
		</view>
		<view class="technology flex_c">
			<image src="../../static/image/thl.png" mode=""></image>
		</view>
		<view class="buy_btn flex_ld_a">
			<text class="sells" v-if="hold" @click="isSell">出售</text>
			<text :class="hold?'caise':'ssss'" @click="submitPay">我想要</text>
		</view>
		<view class="empty3"></view>

		<!-- 我想要弹窗 -->
		<u-overlay :show="showWant" zIndex="999" @click="showWant = false" >
				<view class="want_box flex_Z" @tap.stop>
					<view class="want ">
						<view class="want_tit flex_dq">
							<text class="f36">今日销售</text>
							<text class="f36">（{{realTimeSales}}份）</text>
						</view>
						<!-- <view class="times flex_dq">
				               			<text class="f28">市场交易时间为：0:00~15:00 15:00~23:59</text>
				               		</view> -->
					</view>
					<view class="choice flex_ld">
						<view class="choice_l flex_c" @click="isChange">
							<text class="f28">价格</text>
							<view class="choice_r flex_Z">
								<u-icon name="arrow-up" :color="taggle == 1? '#FF2CDF':'#5d5b85'" size="10"></u-icon>
								<u-icon name="arrow-down" :color="taggle == 1? '#5d5b85':'#FF2CDF'" size="10"></u-icon>
							</view>
						</view>
						<text class="f28" v-if="duoxuan" @click="multipleChoice">切换</text>
						<text class="f28" v-else @click="multipleChoice">多选</text>
					</view>
				
				
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="isScrolltolower">
						<view class="list_s flex_Z " v-for="(item,index) in marketAllList" :key="index">
							<view class="csqx" :class="item.is_member?'acbd':''">
								<view class="list_s_box flex_ld">
									<text class="f32">{{item.goods_name}}</text>
									<view class=" flex_dq" v-show="!duoxuan">
										<text v-show="item.is_member" class="f28 c2 mys">我的</text>
										<text v-show="!item.is_member" class="f28 c2" @click="goBuy(item)">去购买</text>
										<u-icon v-show="!item.is_member" name="arrow-right" color="#FF2CDF"
											size="16"></u-icon>
									</view>
									<view class="" v-show="duoxuan">
										<u-icon v-show="!item.is_member" name="checkmark-circle"
											:color="item.selected ? '#FF2CDF':'#ffffff'" size="20"
											@click="isClickDuo(item,index)"></u-icon>
									</view>
								</view>
								<view class="list_s_box flex_ld">
									<text class="f28 colora">{{item.goods_number}}/{{item.circulation}}</text>
									<view class=" flex_dq">
										<image class="fhtb" src="../../static/icon/fhtb.png" mode=""></image>
										<text class="f32">{{item.price}}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="empty3"></view>
						<view class="empty3"></view>
					</scroll-view>
				
					
					<view class="batch flex_dq" v-if="duoxuan">
						<view class="batch_l flex_Z">
							<view class="batch_l_t flex_dq">
								<text class="f24">当前余额：{{balance}}</text>
								<text class="f24">已选：{{selectId.length}}</text>
							</view>
							<text class="f32">共计：{{allMoney}}</text>
						</view>
						<view class="batch_r flex_c" @click="bulkPurchase">
							<text>批量购买</text>
						</view>
					</view>
				</view>
		


		</u-overlay>
		<!-- 	<u-popup :show="showWant" @close="taggleWant" closeable bgColor="transparent">

		</u-popup> -->

		<!-- 支付弹窗 -->
		<u-popup :show="showPay" @close="showPay = false" closeable bgColor="transparent">
			<view class="pay flex_ZC">
				<text>购买信息</text>
				<view class="pay_box flex_Z">
					<view class="pay_box_c flex_ld">
						<text>藏品名称</text>
						<text class="c0">{{temporary.goods_name}}</text>
					</view>
					<view class="pay_box_c flex_ld">
						<text>持有人地址</text>
						<text class="c0">{{temporary.contract_address}}</text>
					</view>
					<view class="pay_box_c flex_ld">
						<text>购买数量</text>
						<text class="c0">x {{selectId.length}}</text>
					</view>
					<view class="pay_money  flex_ld">
						<text>应支付金额</text>
						<view class=" flex_dq">
							<image class="pay_img" src="../../static/icon/i_money.png" mode=""></image>
							<text class="c0 go_pay">{{allMoney}}</text>
						</view>
					</view>
				</view>
				<view class="tips flex_Z">
					<text>支付说明</text>
					<view class="tips_box">
						<rich-text class="f24 colors" :nodes="infoDetail.purchase_info"></rich-text>
					</view>
				</view>
				<view class="buyNow flex_c" v-if="fictitiousState" @click="goPayIos" >
					<text>立即购买</text>
				</view>
				<view class="buyNow flex_c" v-else @click="goPay" >
					<text>立即购买</text>
				</view>
			</view>
		</u-popup>
		<!-- 各种提示 -->
		<u-popup :show="tipShow" mode="center" @close="tipShow = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f36">提示</text>
				<text v-if="parityBit == 'jymm'" class="prompt_tit">未设置交易密码</text>
				<text v-if="parityBit == 'smrz'" class="prompt_tit">请先实名认证</text>
				<text v-if="parityBit == 'gmmy'" class="prompt_tit">{{remind}}</text>
				<text v-if="parityBit == 'other'" class="prompt_tit">{{remind}}</text>
				<view class="prompt_ntm" v-if="parityBit != 'other'" @click="goNixtPage">
					<text>现在就去</text>
				</view>
				<view class="prompt_ntm" v-if="parityBit == 'other'" @click="tipShow = false">
					<text>关闭</text>
				</view>
				<view class="empty"></view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getuserinfo
	} from "../../api/index.js";
	import {
		goodsRentInfo,
		secretGoods,
		marketList,
		rentCreateOrder
	} from "../../api/store.js";
	export default {
		data() {
			return {
				page: 1,
				size: 10,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				inx: 0,
				allMoney: 0, //多选的总价
				numbers: 1, //数量
				pinpaiId: '', //品牌id
				threeMoxing: '', //3D模型
				ids: '', //藏品id
				balance: '', //余额
				spaceId: '', //出售藏品id
				hold: 0, //自己是否有出售商品
				goodsId: '', //商品id
				Keys: '', //秘钥id
				isPay: '', //是否设置交易密码
				realName: '', //是否实名认证
				parityBit: '', //状态
				contents: '', //提示语
				remind: '', //是否允许购买提示词
				productName: '', //商品名称
				remind: '', //是否允许购买提示词
				tipShow: false, //提示弹窗
				allowPay: false, //是否允许购买
				showWant: false, //弹窗
				showPay: false, //支付弹窗
				duoxuan: false, //切换多选
				taggle: true, // 价格升降
				akkkk: false,
				allowPurchases: false, //是否允许购买拦截
				fictitiousState:false,//ios系统逻辑
				selectId: [], // 多选的id
				infoDetail: {}, //商品信息
				goodsSeries: {}, //系列
				shopBrand: {}, //品牌信息
				marketAllList: [], //正在出售的商品
				realTimeSales: '', //实时销售
				temporary: {}, //暂存购买的商品信息
				nodeCentent: '', //富文本
				nodeCentent2: '', //富文本
				titles: '', //标题
				backgroundColor: "transparent", //标题背景颜色
				list1: ['藏品描述', '权益介绍'],
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				overflow:"hidden"
			}
		},
		onLoad(e) {
			console.log(e);
			this.ids = e.id
			this.goodsId = e.goodsId
			// this.toggleScrollLock()
		},
		onShow(e) {
			this.fictitiousState = uni.getStorageSync('fictitiousState')
			console.log(this.fictitiousState);
			// 每次到详情关闭所有弹窗
			this.tipShow = false
			this.allowPay = false
			this.showPay = false
			this.selectId=[]
			this.allMoney = 0
			this.getuser()
			this.isMarketList()
			this.isGoodsInfo()
			this.isSecretGoods()
		},
		computed: {
			// 计算总价
			totalPrice() {
				return (this.numbers * this.infoDetail.price).toFixed(2)
			},
		},
		// watch: {
		// 	showWant(val) {
		// 		console.log("111", val);
		// 		if (val) {
		// 			this.overflow='hidden' 
		// 			console.log(this.overflow,"11")
		// 			// // #ifdef H5
		// 			// document.body.style.overflow = 'hidden'
		// 			// // #endif
		// 		} else {
		// 			this.overflow='auto'
		// 			console.log(this.overflow,"22")
		// 			// // #ifdef H5
		// 			// document.body.style.overflow = 'visible'
					
		// 			// // #endif
		// 		}
		// 	}
		// },
		methods: {
			moveScroll() {
				console.log('禁止滚动')
			},
			// toggleScrollLock() {
			// 	if (this.showWant) {
			// 		// 当 show 为 true 时，移除禁止滚动的样式
			// 		document.body.style.overflow = ''; // 或者其他方式移除 overflow: hidden 样式
			// 	} else {
			// 		// 当 show 为 false 时，添加禁止滚动的样式
			// 		document.body.style.overflow = 'hidden'; // 或者其他方式添加 overflow: hidden 样式
			// 	}
			// },

			isScrolltolower(e) {
				console.log(e);
				if (!this.akkkk) {
					this.page += 1
					this.isMarketList()
				}
			},
			// 检验是图片还是模型
			checkMediaType(url) {
				// console.log(url);
				// 获取文件扩展名
				var index = url.lastIndexOf(".");
				var ext = url.substr(index + 1);
				console.log(ext);
				var imageExtensions = ['glb', 'gltf', ];
				// 判断模型
				if (imageExtensions.includes(ext)) {
					return '3dmx';
				}
			},
			// 动态计算字体大小
			checkLength(v) {
				const realLength = v.length;
				return realLength;
			},
			// 用户信息
			getuser() {
				getuserinfo().then(res => {
					console.log(res)
					this.isPay = res.data.is_pay
					this.realName = res.data.is_real
					this.balance = res.data.balance
				})
			},
			// 产品详情中当前产品所有的列表
			isMarketList() {
				let data = {
					goods_id: this.goodsId,
					order_by: this.taggle ? 'price asc' : 'price desc',
					page: this.page,
				}
				marketList(data).then(res => {
					console.log(res)
					this.realTimeSales = res.data.rent_pay_number

					let list = res.data.goods_list.data;
					this.marketAllList = this.page == 1 ? list : this.marketAllList.concat(list);
					console.log(this.marketAllList);
					if (list.length < this.size) {
						console.log(1111);
						this.akkkk = true
						this.status = 'nomore';
					} else {
						console.log(23222);
						this.akkkk = false
						this.status = 'loading';
					}
				})
			},
			// 初始化详情
			isGoodsInfo() {
				let data = {
					id: this.ids,
				};
				goodsRentInfo(data).then(res => {
					console.log(res);
					this.pinpaiId = res.data.goods.brand_id
					this.infoDetail = res.data.goods
					this.productName = res.data.goods.goods_name
					const regex = new RegExp('<img', 'gi');
					if(res.data.goods.content){
							var htmlContent = res.data.goods.content
							htmlContent = htmlContent.replace(regex, `<img style="max-width: 100%;"`)
							this.nodeCentent = htmlContent;
					}
					if(res.data.goods.info){
						var htmlContent2 = res.data.goods.info
						htmlContent2 = htmlContent2.replace(regex, `<img style="max-width: 100%;margin:6px 0"`)
						this.nodeCentent2 = htmlContent2;
					}
				
					
					this.threeMoxing = res.data.goods.three_d
					this.goodsSeries = res.data.goods.goods_series
					this.shopBrand = res.data.goods.shop_brand
					this.hold = res.data.is_hold
					if (this.hold == 1) {
						this.spaceId = res.data.member_space_id
					}
				})
			},
			// 查看是否有购买权限
			isSecretGoods() {
				let data = {
					type: 2,
					goods_id: this.goodsId
				};
				secretGoods(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						this.allowPay = true
					} else if (res.code == '1001') {
						this.remind = res.msg
						this.parityBit = 'gmmy'
					} else {
						this.allowPurchases = true
						this.parityBit = 'other'
						this.remind = res.msg
					}
				})
			},
			taggleWant() {
				console.log('清空id 总价');
				this.selectId = []
				this.allMoney = 0
				this.marketAllList.forEach((item, index) => {
					item.selected = false
				})
				this.showWant = false
			},
			isChange() {
				this.taggle = !this.taggle
				this.selectId = []
				this.allMoney = 0
				this.isMarketList()
			},
			isTaggle(index) {
				this.inx = index
			},
			// 多选
			multipleChoice() {
				this.duoxuan = !this.duoxuan
				this.selectId = []
				this.allMoney = 0
				this.marketAllList.forEach((item, index) => {
					item.selected = false
				})
			},
			// 页面滚动

			// 步进器
			overLimit(e) {
				// console.log(e);
				if (e == 'plus') {
					uni.$u.toast('超出限购数量');
				} else {
					uni.$u.toast('最少限购1个');
				}
			},
			// 去购买
			goBuy(item) {
				if (item.is_member) {
					uni.$u.toast('不能购买自己出售的商品');
				} else {
					this.selectId = []
					this.showPay = true,
						this.showWant = false
					this.temporary = item
					this.selectId.push(item.id);
					this.allMoney = item.price
				}
			},
			// 批量购买
			bulkPurchase() {
				// 没有实名认证
				if (!this.realName) {
					this.tipShow = true
					this.parityBit = 'smrz'
					return;
				}
				// 没有设置交易密码
				if (!this.isPay) {
					this.tipShow = true
					this.parityBit = 'jymm'
					return;
				}
				// 限购上限
				if (this.infoDetail.limit) {
					uni.$u.toast('超过当前产品限购数量');
					return
				}
				// 判断用户时候可以购买
				if (this.allowPay) {
					if (this.selectId.length == 0) {
						uni.$u.toast('请选择商品');
						return;
					} else {
						this.showPay = true,
							this.showWant = false
					}
				} else {
					this.tipShow = true
					this.parityBit = 'gmmy'
				}
			},
			isClickDuo(item, index) {
				this.temporary = item
				// console.log(item);
				// console.log(index);
				let idIndex = this.selectId.indexOf(item.id);
				this.marketAllList[index].selected = !this.marketAllList[index].selected;
				// 如果点击得已经被勾选
				if (idIndex != -1) {
					//这个返回的是被删除的内容
					this.selectId.splice(idIndex, 1);
					this.allMoney -= Number(item.price)
				} else {
					this.selectId.push(item.id);
					this.allMoney += Number(item.price)
				}
				console.log(this.selectId);
				console.log(this.allMoney);
			},
			// 立即支付
			submitPay() {
				// 没有实名认证
				if (!this.realName) {
					this.tipShow = true
					this.parityBit = 'smrz'
					return;
				}
				// 没有设置交易密码
				if (!this.isPay) {
					this.tipShow = true
					this.parityBit = 'jymm'
					return;
				}
				// 判断用户时候可以购买
				if (this.allowPay) {
					this.showWant = true

				} else {
					this.tipShow = true
				}
			},
			// 拦截校验
			goNixtPage() {
				console.log(this.parityBit);
				if (this.parityBit == 'jymm') {
					uni.navigateTo({
						url: '/pagesMy/setting/amendsafepassword?first=' + 'first'
					})
				} else if (this.parityBit == 'smrz') {
					uni.navigateTo({
						url: '/pagesMy/setting/realNameAuthentication'
					})
				} else if (this.parityBit == 'gmmy') {
					// 购买秘钥
					uni.navigateTo({
						url: '/pagesMy/brandCenter/numbercard?id=' + this.pinpaiId
						// url:'/pagesMy/mallCenter/productDetails?inx=' + 1 + '&id=' + this.Keys
					})
				}
			},
			// 立即购买
			goPay() {
				if (this.selectId.length == 0) {
					uni.$u.toast('请选择商品');
					
				}else{
					uni.setStorageSync("selectId",this.selectId)
					
					uni.navigateTo({
						url: '/pagesMy/brandCenter/paymentCenter?productType=' + 2 +"&total="+this.allMoney
							})
				}
				
				// let data = {
				// 	id: this.selectId.join(',')
				// }
				// rentCreateOrder(data).then(res => {
				// 	console.log(res)
				// 	if (res.code == 1) {
				// 		uni.navigateTo({
				// 			url: '/pagesMy/brandCenter/paymentCenter?productType=' + 2 + '&order_id=' + res
				// 				.data.id
				// 		})
				// 	} else {
				// 		uni.$u.toast(res.msg);
				// 		this.showPay = false
				// 		this.taggleWant()
				// 	}
				// })
			},
			// 立即购买
			goPayIos() {
				if (this.selectId.length == 0) {
					uni.$u.toast('请选择商品');
					
				}else{
					uni.setStorageSync("selectId",this.selectId)
					
					uni.navigateTo({
						url: '/pagesMy/brandCenter/iosPaymentCenter?productType=' + 2 +"&total="+this.allMoney
							})
				}
			},
			isSell() {
				uni.navigateTo({
					url: '/pagesMy/mycollection/collectionlist?id=' + this.spaceId
				})
			},
			goTrend() {
				uni.navigateTo({
					url: `/pagesMy/mycollection/trend?id=${this.goodsId}`
				})
			}
		},

		//触底加载
		onReachBottom() {
			console.log('触底加载');
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.isMarketList()
			}
		},
		onPageScroll: function(e) {
			const scrollTop = e.scrollTop; // 获取页面滚动位置
			// 根据滚动位置修改状态栏样式
			if (scrollTop > 100) {
				this.backgroundColor = '#211E38';
				this.titles = '详情';
			} else {
				this.backgroundColor = 'transparent';
				this.titles = '';
			}

			console.log("滚动距离为：" + e.scrollTop);
		},
	}
</script>
<style>
	page {
		background: #161425;
	}
</style>
<style scoped>
	.box {
		position: relative;
		z-index: 99;
		width: 750rpx;
		height: 100vh;
	
	}

	@font-face {
		font-family: 'iconfont2';
		src: url("~@/iconfont/YouSheBiaoTiHei.ttf");
	}

	/*  #ifdef  APP-ANDROID || APP-IOS */
	.dengguang {
		position: absolute;
		top: -20rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 546rpx;
		height: 780rpx;
		background: #ffffff10;
		background: url(../../static/icon/dg.png);
		background-size: 100% 100%;
		pointer-events: none;
		z-index: 8;
	}

	/*  #endif  */

	/*  #ifdef  H5 ||WEB  */
	.dengguang {
		position: absolute;
		top: -20rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 546rpx;
		height: 700rpx;
		background: #ffffff10;
		background: url(../../static/icon/dg.png);
		background-size: 100% 100%;
		pointer-events: none;
		z-index: 8;
	}

	/*  #endif  */

	.commodity {
		width: 560rpx;
		margin: 0 auto;
		margin-top: -90rpx;
	}

	.commodity_top {
		position: relative;
		width: 92%;
		height: 580rpx;
		background: url(../../static/image/bg11.png);
		background-size: 100% 100%;
		margin: 0 auto;
		z-index: 7;
	}

	.tupians {
		position: absolute;
		top: 20rpx;
		left: 50%;
		width: 94%;
		height: 600rpx;
		/* height: 700rpx; */
		transform: translateX(-50%);
		/* transform: translateX(-20rpx); */
		/* transform: translateY(-30rpx); */
		z-index: 5;
	}

	.commodity_btm {
		position: relative;
		width: 532rpx;
		height: 282rpx;
		background: url(../../static/image/bg12.png);
		background-size: 100% 100%;
		color: #ffffff;
		margin: 0 auto;
		z-index: 6;
	}

	.commodity_btm_box {
		/* width: 58%; */
		margin-top: 90rpx;
	}

	.commodity_name {
		font-size: 36rpx;
		margin-bottom: 30rpx;
		text-align: center;
	}

	.names {
		font-size: 36rpx;
	}

	.namess {
		font-size: 30rpx;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.series_box {
		background: #221B32;
		font-size: 20rpx;
		padding: 0 6rpx;
	}

	.series_box>text:nth-child(1) {
		font-size: 22rpx;
		padding: 6rpx 10rpx;
		border-radius: 10rpx;
		background: linear-gradient(274deg, #0014FF, #8020EF, #FF2CDF);
		margin-right: 8rpx;
	}

	.issuer {
		width: 690rpx;
		margin: 0 auto;

	}

	.issuer_box {
		width: 100%;
		height: 116rpx;
		color: #ffffff;
		border-radius: 20rpx;
		background: #221B32;
	}

	.issuer_box>image {
		width: 76rpx;
		height: 76rpx;
		border-radius: 50%;
		margin: 0 26rpx;
	}

	.mart30 {
		margin-top: 30rpx;
	}

	.issuer_btm {
		width: 78%;
	}

	.issuer_btm>text:nth-child(2) {
		/* background: pink; */
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.qushi {
		width: 40rpx !important;
		height: 40rpx !important;
	}

	.describe_box {
		width: 690rpx;
		margin: 0 auto;
		background: #221B32;
		padding-bottom: 40rpx;
		border-radius: 20rpx;
	}

	.describe_tit {
		width: 636rpx;
		margin: 40rpx auto;
		padding-top: 50rpx;
		border-radius: 20rpx 20rpx 0 0;

	}

	.sss>text {
		margin-right: 50rpx;
		font-size: 36rpx;
		color: #A7A4AD;
	}

	.describe_ntm {
		width: 690rpx;
		min-height: 100rpx;
		/* max-height: 1200rpx; */
		margin: 0 auto;
	}

	.describe_ntm>image {
		width: 634rpx;
		height: 100%;
	}

	.active {
		color: #ffffff !important;
	}

	.qyi_box {
		background: #15120D;
	}

	.qyi {
		background: #29231E;
	}

	.ys_box {
		background: #150D10;
	}

	.yshou {
		background: #271E29;
	}

	.color1 {
		color: #D8BB8C;
	}

	.color2 {
		color: #CF8CD8;
	}

	.equity_box {
		width: 638rpx;
		margin: 24rpx auto 0;
	}

	.equity {
		width: 100%;
		font-size: 32rpx;
	}

	.equity_top {
		width: 100%;
		height: 86rpx;
		line-height: 86rpx;
		padding-left: 24rpx;
	}

	.equity_list {
		width: 100%;
		/* min-height: 200rpx; */
		/* max-height: 500rpx; */
	}

	.bor_btm {
		border-bottom: 1rpx solid #29231E;
	}

	.bor_r {
		border-right: 1rpx solid #29231E;
	}

	.equity_list>text:nth-child(1) {
		width: 35%;
		height: 86rpx;
		line-height: 86rpx;
		padding-left: 24rpx;
		font-size: 28rpx;
	}

	.equity_list>text:nth-child(2) {
		width: 65%;
		margin-left: 24rpx;
		font-size: 24rpx;
	}

	.equity_list_s>text:nth-child(1) {
		width: 35%;
		height: 86rpx;
		line-height: 86rpx;
		padding-left: 24rpx;
		font-size: 28rpx;
	}

	.equity_list_s>text:nth-child(2) {
		width: 30%;
		margin-left: 24rpx;
		font-size: 24rpx;
	}

	.equity_list_s>text:nth-child(3) {
		width: 35%;
		margin-left: 24rpx;
		font-size: 24rpx;
	}

	.quanyi {
		width: 92%;
		overflow: hidden;
		color: #ffffff;
		font-size: 28rpx;
	}

	.quanyi_s {
		width: 100%;
		overflow: hidden;
		color: #ffffff;
		font-size: 28rpx;
		padding: 20rpx 30rpx;
	}

	.notice_box {
		width: 690rpx;
		background: #221B32;
		border-radius: 20rpx;
		margin: 24rpx auto;
		padding-bottom: 20rpx;
	}

	.notice {
		width: 100%;
		padding: 20rpx 0;
		/* background: pink; */
	}

	.notice>text:nth-child(2) {
		font-size: 36rpx;
		color: #ffffff;
		font-family: 'iconfont2';
		margin: 0 24rpx;
	}

	.tiao {
		width: 154rpx;
		height: 6rpx;
		background: linear-gradient(270deg, #EC2AE1 0%, #8020EF 100%);
		border-radius: 4rpx;
	}

	.xuzhi {
		padding: 0 50rpx;
		overflow: auto;
	}

	.colors {
		color: #D3D1D6;
		line-height: 1.6;
	}

	.technology {
		width: 100%;
		/* background: pink; */
	}

	.technology>image {
		width: 70%;
		height: 60rpx;
	}

	.buy_btn {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 152rpx;
		background: #1F1C3A;
	}

	.sells {
		width: 224rpx;
		height: 76rpx;
		line-height: 76rpx;
		border-radius: 36rpx;
		border: 1rpx solid #FFFFFF;
		font-size: 32rpx;
		text-align: center;
		color: #ffffff;
		border: 1rpx solid #ffffff80;
	}

	.caise {
		width: 224rpx;
		height: 76rpx;
		line-height: 76rpx;
		border-radius: 36rpx;
		border: 1rpx solid #FFFFFF;
		font-size: 32rpx;
		text-align: center;
		color: #ffffff;
		border: none !important;
		background: linear-gradient(274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%) !important;
	}

	.ssss {
		width: 690rpx;
		height: 76rpx;
		line-height: 76rpx;
		border-radius: 36rpx;
		border: 1rpx solid #FFFFFF;
		font-size: 32rpx;
		text-align: center;
		color: #ffffff;
		border: none !important;
		background: linear-gradient(274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%) !important;
	}

	.bgs {
		background: linear-gradient(274deg, #0014FF, #8020EF, #FF2CDF);
	}

	.no_bgs {
		background: linear-gradient(274deg, rgba(0, 20, 255, 0.5), rgba(128, 32, 239, 0.5), rgba(255, 44, 223, 0.5));
	}

	.no_bgs>text {
		color: #ffffff50 !important;
	}

	.scroll-Y {
		min-height: 400rpx;
		max-height: 1300rpx;
	}

	.want_box {
		position: fixed;
		z-index: 500;
		bottom: 0;
		width: 100%;
		min-height: 400rpx;
		max-height: 1300rpx;
		background: #2A2753;
		border-radius: 20rpx 20rpx 0 0;
		color: #ffffff;
		/* overflow: auto; */
	}

	.want {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		padding: 40rpx 0 40rpx 40rpx;
		border-bottom: 1rpx solid #ffffff10;
	}

	.times {
		color: #D7D6E1;
		margin-top: 10rpx;
	}

	.choice {
		width: 100%;
		padding: 0 40rpx;
		margin: 30rpx 0;
	}

	.choice>text {
		width: 132rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		border-radius: 40rpx;
		border: 2rpx solid #FFFFFF;
	}

	.choice_l {
		width: 132rpx;
		height: 46rpx;
		line-height: 46rpx;
		text-align: center;
		background: #353267;
		border-radius: 40rpx;
	}

	.choice_r {
		margin-left: 10rpx;
	}

	.list_s {
		/* 		position: relative;
		width: 670rpx;
		height: 184rpx;
		border-radius: 22rpx;
		margin: 20rpx auto; */
	}

	.csqx {
		position: relative;
		width: 670rpx;
		height: 184rpx;
		border-radius: 22rpx;
		margin: 20rpx auto;
		background: #353267;
	}

	.acbd {
		opacity: 0.5 !important;
	}

	.mys {
		padding: 0rpx 14rpx;
		border-radius: 10rpx;
		color: #ffffff !important;
		background: linear-gradient(274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
	}

	.list_s_box {
		width: 100%;
		padding: 10rpx 32rpx;
		margin-top: 10rpx;
	}

	.list_s_box>text:nth-child(1) {
		width: 75%;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.oneself {
		position: absolute;
		top: 0;
		left: 0;
		background: pink;
	}

	.colora {
		color: #A6A5AF;
	}

	.fhtb {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.batch {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 150rpx;
		background: #1F1C3A;
	}

	.batch_l {
		width: 60%;
		padding-left: 40rpx;
	}

	.batch_l_t {
		color: #ffffff;
		margin-bottom: 20rpx;
	}

	.batch_l_t>text {
		margin-right: 30rpx;
	}

	.batch_r {
		width: 40%;
	}

	.batch_r>text {
		width: 224rpx;
		height: 76rpx;
		line-height: 76rpx;
		text-align: center;
		font-size: 32rpx;
		background: linear-gradient(274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
		border-radius: 40rpx;
	}

	.pay {
		width: 100%;
		background: #2A2753;
		border-radius: 20rpx 20rpx 0 0;
		color: #ffffff;
		overflow: auto;
	}

	.pay>text {
		font-size: 36rpx;
		margin: 60rpx 0;
	}

	.pay_box {
		width: 694rpx;
		/* height: 300rpx; */
		background: #353168;
		border-radius: 18rpx;
	}

	.pay_box_c {
		font-size: 24rpx;
		padding: 28rpx 28rpx 0;
	}

	.pay_box_c>text:nth-child(1) {
		color: #A7A4AD;
	}

	.pay_box_c>text:nth-child(2) {
		width: 70%;
		text-align: right;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.pay_money {
		width: 92%;
		padding: 30rpx 0;
		margin: 30rpx auto 0;
		font-size: 24rpx;
		border-top: 1rpx solid #ffffff20;
	}

	.pay_img {
		width: 32rpx;
		height: 32rpx;
	}

	.go_pay {
		font-size: 36rpx;
		font-family: 'iconfont2';
		margin-left: 10rpx;
	}

	.tips {
		width: 694rpx;
		/* height: 328rpx; */
		background: #353168;
		border-radius: 18rpx;
		margin: 30rpx 0;
		padding-bottom: 20rpx;
	}

	.tips>text {
		margin: 28rpx;
	}

	.tips_box {
		padding: 0 28rpx;
	}

	.buyNow {
		width: 690rpx;
		height: 88rpx;
		background: linear-gradient(274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
		border-radius: 40rpx;
		margin: 46rpx 0;
	}

	.prompt {
		width: 600rpx;
		/* min-height: 400rpx; */
		background: #2A2753;
		margin: 0 auto;
		border-radius: 20rpx;
		color: #ffffff;
		padding-top: 30rpx;
	}

	.prompt>text {
		margin-top: 40rpx;
	}

	.prompt_tit {
		margin: 0 30rpx;
		font-size: 28rpx;
		color: #A6A5AF;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.prompt_ntm {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		width: 414rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: linear-gradient(274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
		border-radius: 28rpx;
		margin-top: 80rpx;
	}


	/deep/.u-number-box__minus {
		background: #2E2A56 !important;
	}

	/deep/.u-number-box__plus {
		background: #2E2A56 !important;
	}

</style>